<template>
  <div v-loading="loading" class="page-wrapper">
    <c-box title="电价水平得分" class="box1 box">
      <c-rang
        v-if="curSR"
        :score="parseInt(curSR[0].avgscore)"
        :rang="curSR[0].auavgrank"
        :total="curSR[0].totalrank"
        :rang1="curSR[1].auavgrank"
        :total1=" curSR[1].totalrank"
        :colors="['#FCF7F8', '#E13B5A', '#F1F758', '#D8C20D', '#ABEFA0', '#6BC435']"
      />
      <div id="echart-1" class="echart"></div>
    </c-box>
    <c-box title="变损得分" class="box2 box">
      <c-rang
        v-if="curSR"
        :score="parseInt(curSR[0].tlossscore)"
        :rang="curSR[0].autlrank"
        :total="curSR[0].totalrank"
        :rang1="curSR[1].autlrank"
        :total1="curSR[1].totalrank"
        :colors="['#FCF7F8', '#3BB8E1', '#ABEFA0', '#6BC435', '#ABEFA0', '#368FEB']"
      />
      <div id="echart-7" class="echart"></div>
    </c-box>
    <c-box title="用电评价总得分" class="box3 box">
      <div class="total-rang">
        <div class="row">
          <div class="score-wrapper">
            <h2 style="margin-top: 0; text-align: center;">2019 年 6 月</h2>
            <c-circle
              v-if="curSR"
              :colors="['rgba(252,247,248,0.9)', 'rgba(129,225,59,0.9)']"
              title
              :score="parseInt(curSR[0].comscore)"
              radius="140"
              fs="96"
            ></c-circle>
          </div>
          <div class="right">
            <div class="right-top">
              <span>总体排名</span>
              <span v-if="curSR" class="rang">{{ curSR[0].allrank }} / {{ curSR[0].totalrank }}</span>
              <span v-for="n in 3" :key="n" style="position: relative;">
                <img src="@/assets/icon/上箭头-3 拷贝 4@2x.png" alt />
              </span>
            </div>
            <div id="echart-2" class="echart"></div>
          </div>
        </div>
        <div class="row" style="height: 200px;">
          <div id="echart-3" class="echart" style="flex: 1; height: 100%"></div>
          <div class="right">
            <div class="right-top">
              <span>行业排名</span>
              <span
                v-if="curSR"
                class="rang"
                style="background:linear-gradient(86deg,rgba(240,175,160,1),rgba(231,101,63,1));"
              >{{ curSR[1].allrank || '-' }} / {{ curSR[1].totalrank || '-' }}</span>
              <span v-for="n in 3" :key="n" style="position: relative;">
                <img src="@/assets/icon/上箭头-3 拷贝 4@2x.png" alt />
              </span>
            </div>
            <div id="echart-4" class="echart"></div>
          </div>
        </div>
        <div id="echart-5" class="row" style="flex:1;"></div>
      </div>
    </c-box>
    <c-box title="功率因数得分" class="box4 box">
      <div id="echart-8" class="echart item"></div>
      <div class="item">
        <c-circle
          v-if="curSR"
          :colors="['#E7C3D6', '#EBD834']"
          :score="parseInt(curSR[0].pwrratioscore)"
        />
        <div class="row">
          <c-rang-type
            v-if="curSR"
            :colors="['#AFC4F4', '#512DEE']"
            title="不分行业排名"
            :rang="curSR[0].auprrank"
            :total="curSR[0].totalrank"
          />
          <spliter />
          <c-rang-type
            v-if="curSR"
            :colors="['#AFC4F4', '#512DEE']"
            title="分行业排名"
            :rang="curSR[1].auprrank"
            :total="curSR[1].totalrank"
          />
        </div>
      </div>
      <div id="echart-9" class="echart item"></div>
    </c-box>
    <c-box title="电费差得分" class="box5 box">
      <c-rang
        v-if="curSR"
        :score="parseInt(curSR[0].feediffvalscore)"
        :rang="curSR[0].aufdrank"
        :total="curSR[0].totalrank"
        :rang1="curSR[1].aufdrank"
        :total1="curSR[1].totalrank"
        :colors="['#FCF7F8', '#F14B11', '#69E2BE', '#0D84D8', '#F1F758', '#D8C20D']"
      />
      <div id="echart-6" class="echart"></div>
    </c-box>
    <c-box title="峰谷差得分" class="box6 box">
      <c-rang
        v-if="curSR"
        :score="parseInt(curSR[0].fgcscore)"
        :rang="curSR[0].aufgcrank"
        :total="curSR[0].totalrank"
        :rang1="curSR[1].aufgcrank"
        :total1="curSR[1].totalrank"
        :colors="['#FCF7F8', '#4E28EF', '#CAE6BB', '#EAD548', '#CAE6BB', '#8FDC5F']"
      />
      <div id="echart-10" class="echart"></div>
    </c-box>
  </div>
</template>

<script>
import CBox from "@/components/PageCard";
import CRang from "./components/CRang";
import echarts from "echarts";
import CCircle from "./components/CCircle";
import CRangType from "./components/CRangType";
import { grid, textColor } from "@/utils/echarts";
import Spliter from "@/components/Spliter";
const priColor = "#2AAEF2";
const level = ["行业标准", "优", "良", "中"];
const numList = ["一", "二", "三", "四", "五"];
export default {
  components: {
    CBox,
    CRang,
    CCircle,
    CRangType,
    Spliter
  },
  data() {
    return {
      rankings: null,
      rankingsHy: null,
      loading: true
    };
  },
  computed: {
    comId() {
      return this.$store.getters.comId;
    },
    curSR() {
      if (this.rankings && this.rankingsHy) {
        return [this.rankings.userRank, this.rankingsHy.userRank];
      } else {
        return null;
      }
    }
  },
  async mounted() {
    try {
      await Promise.all([this.getRanking(1), this.getRanking(3)]);
      this.loading = false;
      this.$nextTick(() => {
        this.getRankingHis();
        this.echart1 = echarts.init(document.getElementById("echart-1"));
        this.echart2 = echarts.init(document.getElementById("echart-2"));
        this.echart3 = echarts.init(document.getElementById("echart-3"));
        this.echart4 = echarts.init(document.getElementById("echart-4"));
        this.echart5 = echarts.init(document.getElementById("echart-5"));
        this.echart6 = echarts.init(document.getElementById("echart-6"));
        this.echart7 = echarts.init(document.getElementById("echart-7"));
        this.echart8 = echarts.init(document.getElementById("echart-8"));
        this.echart9 = echarts.init(document.getElementById("echart-9"));
        this.echart10 = echarts.init(document.getElementById("echart-10"));
        this.setOption1();
        this.setOption2();
        this.setOption3();
        this.setOption4();
        // this.setOption5();
        this.setOption6();
        this.setOption7();
        this.setOption8();
        this.setOption9();
        this.setOption10();
      });
    } catch (e) {
      this.$message.error(e);
      this.loading = false;
    }
  },
  methods: {
    setOption1() {
      const cstart = "#8772E1",
        cend = "#4D27EF",
        data1 = [],
        xData1 = [],
        mData1 = [],
        data2 = [],
        xData2 = [],
        mData2 = [];
      const allSR = this.rankings.listAll;
      const hySR = this.rankingsHy.listAll;
      const allLevel = this.rankings.levlealls;
      const hyLevel = this.rankingsHy.levlealls;
      for (let i = 0; i < 4; i++) {
        const a = allLevel[i];
        const h = hyLevel[i];
        mData1.push({
          name: level[i],
          yAxis: parseInt(a.avgvalscore),
          lineStyle: {
            color: i === 0 ? "#FFFF00" : priColor
          }
        });
        mData2.push({
          name: level[i],
          yAxis: parseInt(h && h.avgvalscore),
          lineStyle: {
            color: i === 0 ? "#FFFF00" : priColor
          }
        });
      }
      allSR.forEach((e, i) => {
        data1.push({
          value: parseInt(e.score),
          name: e.clientname
        });
        xData1.push(`第${numList[i]}名`);
      });
      hySR.forEach((e, i) => {
        data2.push({
          value: parseInt(e.score),
          name: e.clientname
        });
        xData2.push(`第${numList[i]}名`);
      });
      data1.push({
        value: parseInt(this.curSR[0] && this.curSR[0].avgscore),
        name: "我",
        itemStyle: {
          normal: {
            color: "#00FFFF"
          },
          emphasis: {
            color: "#00ccFF"
          }
        }
      });
      data2.push({
        value: parseInt(this.curSR[1] && this.curSR[1].avgscore),
        name: "我",
        itemStyle: {
          normal: {
            color: "#00FFFF"
          },
          emphasis: {
            color: "#00ccFF"
          }
        }
      });
      xData1.push("我");
      xData2.push("我");
      xData2.reverse();
      data2.reverse();
      const option = {
        legend: {
          show: false
        },
        title: [
          {
            text: "排名前五",
            left: 10,
            top: 0,
            textStyle: {
              color: priColor,
              fontSize: 14
            }
          },
          {
            text: "行业排名前五",
            right: 10,
            top: 0,
            textStyle: {
              color: priColor,
              fontSize: 14
            }
          }
        ],
        tooltip: {},
        xAxis: [
          {
            type: "category",
            gridIndex: 0,
            axisLine: {
              lineStyle: {
                color: priColor
              }
            },
            data: xData1
          },
          {
            type: "category",
            gridIndex: 1,
            axisLine: {
              lineStyle: {
                color: priColor
              }
            },
            data: xData2
          }
        ],
        yAxis: [
          {
            gridIndex: 0,
            axisLine: {
              lineStyle: {
                color: priColor
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              show: false
            }
          },
          {
            gridIndex: 1,
            axisLine: {
              lineStyle: {
                color: priColor
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              show: false
            },
            position: "right"
          }
        ],
        grid: [
          { ...grid, right: "55%", containLabel: true },
          { ...grid, left: "55%", right: 25, containLabel: true }
        ],
        series: [
          // These series are in the first grid.
          {
            type: "bar",
            name: "行业得分",
            label: {
              show: true,
              color: textColor,
              position: "inside",
              formatter: ({ data }) => {
                return `${data.name} - ${data.value}`;
              },
              rotate: 90
            },
            barWidth: 10,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: cstart },
                  { offset: 1, color: cend }
                ])
              },
              emphasis: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: cend },
                  { offset: 1, color: cstart }
                ])
              }
            },
            markLine: {
              lineStyle: {
                color: priColor
              },
              data: mData1
            },
            data: data1
          },
          // { type: "bar", seriesLayoutBy: "row" },
          // { type: "bar", seriesLayoutBy: "row" },
          // These series are in the second grid.
          {
            type: "bar",
            name: "行业得分",
            label: {
              show: true,
              position: "inside",
              color: textColor,
              formatter: ({ data }) => {
                return `${data.name} - ${data.value}`;
              },
              rotate: 90
            },
            barWidth: 10,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: cstart },
                  { offset: 1, color: cend }
                ])
              },
              emphasis: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: cend },
                  { offset: 1, color: cstart }
                ])
              }
            },
            markLine: {
              lineStyle: {
                color: priColor
              },
              data: mData2
            },
            xAxisIndex: 1,
            yAxisIndex: 1,
            data: data2
          }
        ]
      };
      this.echart1.setOption(option);
    },
    setOption2() {
      const cstart = "#BACDF0",
        cend = "#1657E9",
        mData = [];
      const data = [],
        xData = [];
      const allLevel = this.rankings.levlealls;
      // const hyLevel = this.rankingsHy.levlealls;
      for (let i = 0; i < 4; i++) {
        const a = allLevel[i];
        // let h = hyLevel[i];
        mData.push({
          name: level[i],
          xAxis: parseInt(a.avgvalscore),
          lineStyle: {
            color: i === 0 ? "#FFFF00" : priColor
          }
        });
      }
      const allSR = this.rankings.listAllz;
      allSR.forEach((e, i) => {
        data.push({
          value: parseInt(e.score),
          name: e.clientname
        });
        xData.push(`第${numList[i]}名`);
      });
      data.push({
        value: parseInt(this.curSR[0] && this.curSR[0].comscore),
        name: "我",
        itemStyle: {
          normal: {
            color: "#0B923B"
          },
          emphasis: {
            color: "#0b523b"
          }
        }
      });
      xData.push("我");
      xData.reverse();
      data.reverse();
      const option = {
        textStyle: {
          color: priColor
        },
        title: {
          show: false
        },
        tooltip: {},
        legend: {
          show: false
        },
        grid,
        xAxis: {
          type: "value",
          axisLine: {
            lineStyle: {
              color: priColor
            }
          },
          axisLabel: {
            rotate: -45
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        yAxis: {
          type: "category",
          data: xData,
          axisLine: {
            lineStyle: {
              color: priColor
            }
          },
          axisTick: {
            show: false
          }
        },
        series: {
          name: "当前分数",
          type: "bar",
          barWidth: 10,
          label: {
            show: true,
            position: "inside",
            color: textColor,
            formatter: ({ data }) => {
              return `${data.name} - ${data.value}`;
            }
          },
          markLine: {
            lineStyle: {
              color: priColor
            },
            data: mData
          },
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                { offset: 0, color: cstart },
                { offset: 1, color: cend }
              ])
            },
            emphasis: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                { offset: 0, color: cend },
                { offset: 1, color: cstart }
              ])
            }
          },
          data: data
        }
      };
      this.echart2.setOption(option);
    },
    setOption3() {
      const a = this.curSR[0];
      const option = {
        title: {
          show: false
        },
        tooltip: {
          position: "right"
        },
        legend: {
          show: false
        },
        grid,
        radar: {
          radius: "60%",
          name: {
            textStyle: {
              color: priColor
            }
          },
          splitArea: {
            areaStyle: {
              color: [
                "transparent",
                "transparent",
                "transparent",
                "transparent"
              ]
            }
          },
          indicator: [
            { name: "与最优报价方式\n电费差得分 ", max: 100 },
            { name: "变损\n得分", max: 100 },
            { name: "电价水平\n得分", max: 100 },
            { name: "功率因数\n得分", max: 100 },
            { name: "峰谷差\n得分", max: 100 }
          ]
        },
        series: [
          {
            name: "得分统计",
            type: "radar",
            itemStyle: { normal: { areaStyle: { type: "default" } } },
            data: [
              {
                itemStyle: {
                  color: "#0B923B",
                  borderColor: "#0B923B"
                },
                value: [
                  a.feediffvalscore,
                  a.tlossscore,
                  a.avgscore,
                  a.pwrratioscore,
                  a.fgcscore
                ],
                name: "得分情况"
              }
            ]
          }
        ]
      };
      this.echart3.setOption(option);
    },
    setOption4() {
      const cstart = "#BACDF0",
        cend = "#1657E9",
        mData = [
          {
            name: "中",
            xAxis: 800
          },
          {
            name: "良",
            xAxis: 1000,
            lineStyle: {
              color: "#FFFF00"
            }
          }
        ];
      const data = [],
        xData = [];
      const hyLevel = this.rankingsHy.levlealls;
      for (let i = 0; i < 4; i++) {
        const h = hyLevel[i];
        mData.push({
          name: level[i],
          xAxis: parseInt(h && h.avgvalscore),
          lineStyle: {
            color: i === 0 ? "#FFFF00" : priColor
          }
        });
      }
      const hySR = this.rankingsHy.listAllz;
      hySR.forEach((e, i) => {
        data.push({
          value: parseInt(e.score),
          name: e.clientname
        });
        xData.push(`第${numList[i]}名`);
      });
      data.push({
        value: parseInt(this.curSR[1].comscore),
        name: "我",
        itemStyle: {
          normal: {
            color: "#0B923B"
          },
          emphasis: {
            color: "#0b523b"
          }
        }
      });
      xData.push("我");
      xData.reverse();
      data.reverse();
      const option = {
        textStyle: {
          color: priColor
        },
        title: {
          show: false
        },
        tooltip: {},
        legend: {
          show: false
        },
        grid,
        xAxis: {
          type: "value",
          axisLine: {
            lineStyle: {
              color: priColor
            }
          },
          splitNumber: 5,
          axisLabel: {
            rotate: -45
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        yAxis: {
          type: "category",
          data: xData,
          axisLine: {
            lineStyle: {
              color: priColor
            }
          },
          axisTick: {
            show: false
          }
        },
        series: {
          name: "当前分数",
          type: "bar",
          barWidth: 10,
          label: {
            show: true,
            position: "inside",
            color: textColor,
            formatter: ({ data }) => {
              return `${data.name} - ${data.value}`;
            }
          },
          markLine: {
            lineStyle: {
              color: priColor
            },
            data: mData
          },
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                { offset: 0, color: cstart },
                { offset: 1, color: cend }
              ])
            },
            emphasis: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                { offset: 0, color: cend },
                { offset: 1, color: cstart }
              ])
            }
          },
          data: data
        }
      };
      this.echart4.setOption(option);
    },
    setOption5(_data) {
      const data1 = [],
        data2 = [],
        xData = [];
      _data.forEach(e => {
        if (!e) {
          return;
        }
        data1.push(parseInt(e.comscore));
        data2.push(e.allrank);
        xData.push(e.year + "-" + e.month);
      });
      const option = {
        color: ["#0B923B"],
        title: [
          {
            text: "近期得分情况",
            textStyle: {
              fontSize: 14,
              color: priColor,
              fontWeight: "normal"
            },
            left: "2%",
            top: 0
          },
          {
            text: "近期排名情况",
            textStyle: {
              fontSize: 14,
              color: priColor,
              fontWeight: "normal"
            },
            right: "7%",
            top: 0
          }
        ],
        textStyle: {
          color: priColor
        },
        tooltip: {
          trigger: "axis"
        },
        grid: [
          {
            top: "30",
            bottom: "2%",
            left: "2%",
            right: "60%",
            containLabel: true
          },
          {
            top: "30",
            bottom: "2%",
            left: "55%",
            right: "7%",
            containLabel: true
          }
        ],
        xAxis: [
          {
            type: "category",
            data: xData,
            axisLine: {
              lineStyle: {
                color: priColor
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            }
          },
          {
            type: "category",
            gridIndex: 1,
            axisLine: {
              lineStyle: {
                color: priColor
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            },
            data: xData
          }
        ],
        yAxis: [
          {
            type: "value",
            axisLine: {
              lineStyle: {
                color: priColor
              }
            },
            axisTick: {
              show: false
            },
            splitNumber: 3,
            splitLine: {
              show: false
            }
          },
          {
            type: "value",
            axisLine: {
              lineStyle: {
                color: priColor
              }
            },
            splitNumber: 3,
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            gridIndex: 1
          }
        ],
        series: [
          {
            data: data1,
            type: "line"
          },
          {
            data: data2,
            type: "line",
            xAxisIndex: 1,
            yAxisIndex: 1
          }
        ]
      };
      this.echart5.setOption(option);
    },
    setOption6() {
      const cstart = "#C2E5AE",
        cend = "#93DC66",
        meColor = "#F197F4",
        meColorA = "#d19FF4",
        data1 = [],
        mData1 = [],
        data2 = [],
        xData1 = [],
        xData2 = [],
        mData2 = [];
      const allLevel = this.rankings.levlealls;
      const hyLevel = this.rankingsHy.levlealls;
      for (let i = 0; i < 4; i++) {
        const a = allLevel[i];
        const h = hyLevel[i];
        mData1.push({
          name: level[i],
          yAxis: parseInt(a && a.fdvaluescore),
          lineStyle: {
            color: i === 0 ? "#FFFF00" : priColor
          }
        });
        mData2.push({
          name: level[i],
          yAxis: parseInt(h && h.fdvaluescore),
          lineStyle: {
            color: i === 0 ? "#FFFF00" : priColor
          }
        });
      }
      const allSR = this.rankings.listAllbgdfc;
      const hySR = this.rankingsHy.listAllbgdfc;
      allSR.forEach((e, i) => {
        data1.push({
          value: parseInt(e.score),
          name: e.clientname
        });
        xData1.push(`第${numList[i]}名`);
      });
      hySR.forEach((e, i) => {
        data2.push({ value: parseInt(e.score), name: e.clientname });
        xData2.push(`第${numList[i]}名`);
      });
      data1.push({
        value: parseInt(this.curSR[0] && this.curSR[0].feediffvalscore),
        name: "我",
        itemStyle: {
          normal: {
            color: meColor
          },
          emphasis: {
            color: meColorA
          }
        }
      });
      data2.push({
        value: parseInt(this.curSR[1].feediffvalscore),
        name: "我",
        itemStyle: {
          normal: {
            color: meColor
          },
          emphasis: {
            color: meColorA
          }
        }
      });
      xData1.push("我");
      xData2.push("我");
      xData2.reverse();
      data2.reverse();
      const option = {
        legend: {
          show: false
        },
        title: [
          {
            text: "排名前五",
            left: 10,
            top: 0,
            textStyle: {
              color: priColor,
              fontSize: 14
            }
          },
          {
            text: "行业排名前五",
            right: 10,
            top: 0,
            textStyle: {
              color: priColor,
              fontSize: 14
            }
          }
        ],
        tooltip: {},
        xAxis: [
          {
            type: "category",
            gridIndex: 0,
            axisLine: {
              lineStyle: {
                color: priColor
              }
            },
            data: xData1
          },
          {
            type: "category",
            gridIndex: 1,
            axisLine: {
              lineStyle: {
                color: priColor
              }
            },
            data: xData2
          }
        ],
        yAxis: [
          {
            gridIndex: 0,
            axisLine: {
              lineStyle: {
                color: priColor
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              show: false
            }
          },
          {
            gridIndex: 1,
            axisLine: {
              lineStyle: {
                color: priColor
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              show: false
            },
            position: "right"
          }
        ],
        grid: [
          { ...grid, right: "55%", containLabel: true },
          { ...grid, left: "55%", right: 30, containLabel: true }
        ],
        series: [
          // These series are in the first grid.
          {
            type: "bar",
            name: "行业得分",
            label: {
              show: true,
              position: "inside",
              color: textColor,
              rotate: 90,
              formatter: ({ data }) => {
                return `${data.name} - ${data.value}`;
              }
            },
            barWidth: 10,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: cstart },
                  { offset: 1, color: cend }
                ])
              },
              emphasis: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: cend },
                  { offset: 1, color: cstart }
                ])
              }
            },
            markLine: {
              lineStyle: {
                color: priColor
              },
              data: mData1
            },
            data: data1
          },
          // { type: "bar", seriesLayoutBy: "row" },
          // { type: "bar", seriesLayoutBy: "row" },
          // These series are in the second grid.
          {
            type: "bar",
            name: "行业得分",
            label: {
              show: true,
              position: "inside",
              color: textColor,
              rotate: 90,
              formatter: ({ data }) => {
                return `${data.name} - ${data.value}`;
              }
            },
            barWidth: 10,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: cstart },
                  { offset: 1, color: cend }
                ])
              },
              emphasis: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: cend },
                  { offset: 1, color: cstart }
                ])
              }
            },
            markLine: {
              lineStyle: {
                color: priColor
              },
              data: mData2
            },
            xAxisIndex: 1,
            yAxisIndex: 1,
            data: data2
          }
        ]
      };
      this.echart6.setOption(option);
    },
    setOption7() {
      const cstart = "#EAECCD",
        cend = "#D7E40B",
        meColor = "#8193E0",
        meColorA = "#819fE0",
        data1 = [],
        mData1 = [],
        data2 = [],
        xData1 = [],
        xData2 = [],
        mData2 = [];
      const allLevel = this.rankings.levlealls;
      const hyLevel = this.rankingsHy.levlealls;
      for (let i = 0; i < 4; i++) {
        const a = allLevel[i];
        const h = hyLevel[i];
        mData1.push({
          name: level[i],
          yAxis: a && a.tlvaluescore,
          lineStyle: {
            color: i === 0 ? "#FFFF00" : priColor
          }
        });
        mData2.push({
          name: level[i],
          yAxis: h && h.tlvaluescore,
          lineStyle: {
            color: i === 0 ? "#FFFF00" : priColor
          }
        });
      }
      const allSR = this.rankings.listAllbs;
      const hySR = this.rankingsHy.listAllbs;
      allSR.forEach((e, i) => {
        data1.push({ value: parseInt(e.score), name: e.clientname });
        xData1.push(`第${numList[i]}名`);
      });
      hySR.forEach((e, i) => {
        data2.push({ value: parseInt(e.score), name: e.clientname });
        xData2.push(`第${numList[i]}名`);
      });
      data1.push({
        value: parseInt(this.curSR[0] && this.curSR[0].tlossscore),
        name: "我",
        itemStyle: {
          normal: {
            color: meColor
          },
          emphasis: {
            color: meColorA
          }
        }
      });
      data2.push({
        value: parseInt(this.curSR[1].tlossscore),
        name: "我",
        itemStyle: {
          normal: {
            color: meColor
          },
          emphasis: {
            color: meColorA
          }
        }
      });
      xData1.push("我");
      xData2.push("我");
      xData2.reverse();
      data2.reverse();
      const option = {
        legend: {
          show: false
        },
        title: [
          {
            text: "排名前五",
            left: 10,
            top: 0,
            textStyle: {
              color: priColor,
              fontSize: 14
            }
          },
          {
            text: "行业排名前五",
            right: 10,
            top: 0,
            textStyle: {
              color: priColor,
              fontSize: 14
            }
          }
        ],
        tooltip: {},
        xAxis: [
          {
            type: "category",
            gridIndex: 0,
            axisLine: {
              lineStyle: {
                color: priColor
              }
            },
            data: xData1
          },
          {
            type: "category",
            gridIndex: 1,
            axisLine: {
              lineStyle: {
                color: priColor
              }
            },
            data: xData2
          }
        ],
        yAxis: [
          {
            gridIndex: 0,
            axisLine: {
              lineStyle: {
                color: priColor
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              show: false
            }
          },
          {
            gridIndex: 1,
            axisLine: {
              lineStyle: {
                color: priColor
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              show: false
            },
            position: "right"
          }
        ],
        grid: [
          { ...grid, right: "55%", containLabel: true },
          { ...grid, left: "55%", right: 30, containLabel: true }
        ],
        series: [
          // These series are in the first grid.
          {
            type: "bar",
            name: "行业得分",
            label: {
              show: true,
              position: "inside",
              color: textColor,
              rotate: 90,
              formatter: ({ data }) => {
                return `${data.name} - ${data.value}`;
              }
            },
            barWidth: 10,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: cstart },
                  { offset: 1, color: cend }
                ])
              },
              emphasis: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: cend },
                  { offset: 1, color: cstart }
                ])
              }
            },
            markLine: {
              lineStyle: {
                color: priColor
              },
              data: mData1
            },
            data: data1
          },
          // { type: "bar", seriesLayoutBy: "row" },
          // { type: "bar", seriesLayoutBy: "row" },
          // These series are in the second grid.
          {
            type: "bar",
            name: "行业得分",
            label: {
              show: true,
              position: "inside",
              color: textColor,
              rotate: 90,
              formatter: ({ data }) => {
                return `${data.name} - ${data.value}`;
              }
            },
            barWidth: 10,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: cstart },
                  { offset: 1, color: cend }
                ])
              },
              emphasis: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: cend },
                  { offset: 1, color: cstart }
                ])
              }
            },
            markLine: {
              lineStyle: {
                color: priColor
              },
              data: mData2
            },
            xAxisIndex: 1,
            yAxisIndex: 1,
            data: data2
          }
        ]
      };
      this.echart7.setOption(option);
    },
    setOption8() {
      const cstart = "#F589C1",
        cend = "#EB346C",
        meColor = "#FFFF00",
        meColorA = "#FFAF00",
        mData = [];
      const data = [],
        xData = [];
      const allLevel = this.rankings.levlealls;
      for (let i = 0; i < 4; i++) {
        const a = allLevel[i];
        mData.push({
          name: level[i],
          yAxis: a.ratiovalscore,
          lineStyle: {
            color: i === 0 ? "#FFFF00" : priColor
          }
        });
      }
      const allSR = this.rankings.listAllbgv;
      allSR.forEach((e, i) => {
        data.push({
          name: e.clientname,
          value: parseInt(e.score)
        });
        xData.push(`第${numList[i]}名`);
      });

      data.push({
        value: parseInt(this.curSR[0] && this.curSR[0].pwrratioscore),
        name: "我",
        itemStyle: {
          normal: {
            color: meColor
          },
          emphasis: {
            color: meColorA
          }
        }
      });
      xData.push("我");
      const option = {
        legend: {
          show: false
        },
        title: {
          text: "排名前五",
          left: 10,
          top: 0,
          textStyle: {
            color: priColor,
            fontSize: 14
          }
        },
        tooltip: {},
        xAxis: {
          type: "category",
          gridIndex: 0,
          axisLine: {
            lineStyle: {
              color: priColor
            }
          },
          // axisLabel: {
          //   show: false
          // },
          data: xData
        },
        yAxis: {
          gridIndex: 0,
          axisLine: {
            lineStyle: {
              color: priColor
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisLabel: {
            show: false
          }
        },
        grid: {
          ...grid,
          right: 30
        },
        series: {
          type: "bar",
          name: "行业得分",
          label: {
            show: true,
            position: "inside",
            color: textColor,
            formatter: ({ data }) => {
              return `${data.name} - ${data.value}`;
            },
            rotate: 90
          },
          barWidth: 10,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: cstart },
                { offset: 1, color: cend }
              ])
            },
            emphasis: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: cend },
                { offset: 1, color: cstart }
              ])
            }
          },
          markLine: {
            lineStyle: {
              color: priColor
            },
            data: mData
          },
          data: data
        }
      };
      this.echart8.setOption(option);
    },
    setOption9() {
      const cstart = "#F589C1",
        cend = "#EB346C",
        meColor = "#FFFF00",
        meColorA = "#FFAF00",
        mData = [];
      const data = [],
        xData = [];
      const allLevel = this.rankingsHy.levlealls;
      for (let i = 0; i < 4; i++) {
        const h = allLevel[i];
        mData.push({
          name: level[i],
          yAxis: h.ratiovalscore,
          lineStyle: {
            color: i === 0 ? "#FFFF00" : priColor
          }
        });
      }
      const hySR = this.rankingsHy.listAllbgv;
      hySR.forEach((e, i) => {
        data.push({
          name: e.clientname,
          value: parseInt(e.score)
        });
        xData.push(`第${numList[i]}名`);
      });
      data.push({
        value: parseInt(this.curSR[1].pwrratioscore),
        name: "我",
        itemStyle: {
          normal: {
            color: meColor
          },
          emphasis: {
            color: meColorA
          }
        }
      });
      xData.push("我");
      xData.reverse();
      data.reverse();
      const option = {
        legend: {
          show: false
        },
        title: {
          text: "排名前五",
          right: 10,
          top: 0,
          textStyle: {
            color: priColor,
            fontSize: 14
          }
        },
        tooltip: {},
        xAxis: {
          type: "category",
          axisLine: {
            lineStyle: {
              color: priColor
            }
          },
          data: xData
        },
        yAxis: {
          axisLine: {
            lineStyle: {
              color: priColor
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisLabel: {
            show: false
          },
          position: "right"
        },
        grid: {
          ...grid,
          right: 30
        },
        series: {
          type: "bar",
          name: "行业得分",
          label: {
            show: true,
            color: textColor,
            position: "inside",
            formatter: ({ data }) => {
              return `${data.name} - ${data.value}`;
            },
            rotate: 90
          },
          barWidth: 10,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: cstart },
                { offset: 1, color: cend }
              ])
            },
            emphasis: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: cend },
                { offset: 1, color: cstart }
              ])
            }
          },
          markLine: {
            lineStyle: {
              color: priColor
            },
            data: mData
          },
          data: data
        }
      };
      this.echart9.setOption(option);
    },
    setOption10() {
      const cstart = "#8772E1",
        cend = "#27EFE3",
        meColor = "#FFC600",
        meColorA = "#FFa600",
        data1 = [],
        mData1 = [],
        data2 = [],
        xData1 = [],
        xData2 = [],
        mData2 = [];
      const allLevel = this.rankings.levlealls;
      const hyLevel = this.rankingsHy.levlealls;
      for (let i = 0; i < 4; i++) {
        const a = allLevel[i];
        const h = hyLevel[i];
        mData1.push({
          name: level[i],
          yAxis: parseInt(a.fgcvalscore),
          lineStyle: {
            color: i === 0 ? "#FFFF00" : priColor
          }
        });
        mData2.push({
          name: level[i],
          yAxis: parseInt(h.fgcvalscore),
          lineStyle: {
            color: i === 0 ? "#FFFF00" : priColor
          }
        });
      }
      const allSR = this.rankings.listAllbfgc;
      const hySR = this.rankingsHy.listAllbfgc;
      allSR.forEach((e, i) => {
        data1.push({ value: parseInt(e.score), name: e.clientname });
        xData1.push(`第${numList[i]}名`);
      });
      hySR.forEach((e, i) => {
        data2.push({ value: parseInt(e.score), name: e.clientname });
        xData2.push(`第${numList[i]}名`);
      });
      data1.push({
        value: parseInt(this.curSR[0] && this.curSR[0].fgcscore),
        name: "我",
        itemStyle: {
          normal: {
            color: meColor
          },
          emphasis: {
            color: meColorA
          }
        }
      });
      data2.push({
        value: parseInt(this.curSR[1].fgcscore),
        name: "我",
        itemStyle: {
          normal: {
            color: meColor
          },
          emphasis: {
            color: meColorA
          }
        }
      });
      xData1.push("我");
      xData2.push("我");
      xData2.reverse();
      data2.reverse();
      const option = {
        legend: {
          show: false
        },
        title: [
          {
            text: "排名前五",
            left: 10,
            top: 0,
            textStyle: {
              color: priColor,
              fontSize: 14
            }
          },
          {
            text: "排名前五",
            right: 10,
            top: 0,
            textStyle: {
              color: priColor,
              fontSize: 14
            }
          }
        ],
        tooltip: {},
        xAxis: [
          {
            type: "category",
            gridIndex: 0,
            axisLine: {
              lineStyle: {
                color: priColor
              }
            },
            data: xData1
          },
          {
            type: "category",
            gridIndex: 1,
            axisLine: {
              lineStyle: {
                color: priColor
              }
            },
            data: xData2
          }
        ],
        yAxis: [
          {
            gridIndex: 0,
            axisLine: {
              lineStyle: {
                color: priColor
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              show: false
            }
          },
          {
            gridIndex: 1,
            axisLine: {
              lineStyle: {
                color: priColor
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              show: false
            },
            position: "right"
          }
        ],
        grid: [
          { ...grid, right: "55%", containLabel: true },
          { ...grid, left: "55%", right: 30, containLabel: true }
        ],
        series: [
          // These series are in the first grid.
          {
            type: "bar",
            name: "行业得分",
            label: {
              show: true,
              color: textColor,
              position: "inside",
              formatter: ({ data }) => {
                return `${data.name} - ${data.value}`;
              },
              rotate: 90
            },
            barWidth: 10,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: cstart },
                  { offset: 1, color: cend }
                ])
              },
              emphasis: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: cend },
                  { offset: 1, color: cstart }
                ])
              }
            },
            markLine: {
              lineStyle: {
                color: priColor
              },
              data: mData1
            },
            data: data1
          },
          // { type: "bar", seriesLayoutBy: "row" },
          // { type: "bar", seriesLayoutBy: "row" },
          // These series are in the second grid.
          {
            type: "bar",
            name: "行业得分",
            label: {
              show: true,
              color: textColor,
              position: "inside",
              formatter: ({ data }) => {
                return `${data.name} - ${data.value}`;
              },
              rotate: 90
            },
            barWidth: 10,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: cstart },
                  { offset: 1, color: cend }
                ])
              },
              emphasis: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: cend },
                  { offset: 1, color: cstart }
                ])
              }
            },
            markLine: {
              lineStyle: {
                color: priColor
              },
              data: mData2
            },
            xAxisIndex: 1,
            yAxisIndex: 1,
            data: data2
          }
        ]
      };
      this.echart10.setOption(option);
    },
    async getRanking(type = 1) {
      const post = {
        id: this.comId,
        year: 2019,
        month: 4,
        type1: type
      };
      try {
        const res = await this.$axios.post("/eng/fees/ranking", post);
        type === 1 ? (this.rankingsHy = res.data) : (this.rankings = res.data);
      } catch (e) {
        console.error(e);
      }
    },
    async getRankingHis() {
      const post = {
        id: this.comId
      };
      const res = await this.$axios.post("eng/fees/ranking_5", post);
      this.setOption5(res.data);
    }
  }
};
</script>

<style lang="scss" scoped>
.page-wrapper {
  color: #2aaef2;
  display: grid;
  grid-template-columns: 2fr 3fr 2fr;
  grid-template-rows: repeat(10, 1fr);
  grid-auto-flow: column;
  grid-gap: 10px;
  .box {
    overflow: hidden;
    /deep/ .card-container {
      display: flex;
      flex-direction: column;
      height: 100%;
      .echart {
        flex: 1;
        overflow: hidden;
      }
    }
  }
  .box1,
  .box2 {
    grid-row-start: span 5;
  }
  .box3 {
    grid-row-start: span 7;
  }
  .box4 {
    grid-row-start: span 3;
    /deep/ .card-container {
      flex-direction: row;
    }
  }
  .box5,
  .box6 {
    grid-row-start: span 5;
  }
}
// /deep/ .score-box .box-content {
//   display: flex;
//   flex-direction: column;
//   .echart {
//     flex: 1;
//     flex-grow: 1;
//   }
// }
.right {
  font-size: 24px;
  display: flex;
  flex-direction: column;
  height: 100%;
  .rang {
    display: inline-block;
    height: 40px;
    color: #fff;
    font-size: 30px;
    line-height: 40px;
    text-align: center;
    width: 160px;
    margin-left: 10px;
    background: linear-gradient(
      86deg,
      rgba(135, 114, 225, 1),
      rgba(77, 39, 239, 1)
    );
  }
  .right-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    img {
      margin: 0 6px;
      height: 100%;
      width: auto;
    }
  }
  .echart {
    flex: 1;
  }
}
.total-rang {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
  padding: 14px;
  // .right {
  //   font-size: 24px;
  //   display: flex;
  //   flex-direction: column;
  //   height: 100%;
  //   .rang {
  //     display: inline-block;
  //     height: 40px;
  //     color: #fff;
  //     font-size: 30px;
  //     line-height: 40px;
  //     text-align: center;
  //     width: 160px;
  //     margin-left: 10px;
  //     background: linear-gradient(
  //       86deg,
  //       rgba(135, 114, 225, 1),
  //       rgba(77, 39, 239, 1)
  //     );
  //   }
  //   .right-top {
  //     display: flex;
  //     justify-content: space-between;
  //     align-items: center;
  //     img {
  //       margin: 0 6px;
  //       height: 100%;
  //       width: auto;
  //     }
  //   }
  //   .echart-2 {
  //     flex: 1;
  //   }
  // }
}
// .center-btm {
//   /deep/ .box-content {
//     display: flex;
//   }
//   .item {
//     flex: 1;
//     height: 100%;
//   }
//   .row {
//     margin-top: 0;
//     /deep/ .com-rang-type {
//       flex-shrink: 1;
//       &:nth-child(1) {
//         margin-right: 14px;
//       }
//     }
//   }
// }
</style>
